<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>持明法洲项目</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>

	<script>
		/*左侧导航使用树形分别显示一级菜单，和一级菜单下的二级菜单，都是采用字符串拼接；
		* 给二级菜单添加一个点击事件，点击之后在主题区添加新的选项卡*/

		//通过ajax获取后台的菜单数据
		$(function () {
			$.ajax({
				url:"${pageContext.request.contextPath}/menu/child",
				success:function (data) {
					//console.log(data)

					var content="";
					//获取一级菜单  作展示  遍历
					//each() 有两个参数 参数一：要展示的数据 参数二：匿名函数  函数内有两个参数 位置一：下标 位置二：要遍历的元素
					$.each(data,function (index1,menu1) {
						//拼接一级菜单的起始标签
						var startMenu1="<li class=\"layui-nav-item layui-nav-itemed\"><a class=\"\" href=\"javascript:;\">";
						var endMenu1A="</a>";
						//拼接一级菜单的name值
						content+=startMenu1+menu1.menuName+endMenu1A;
						// 在a标签后拼接二级菜单的内容  遍历二级菜单内容 menu1.child
						// \ 符合是转义 所谓转义 有些符号 例如：单引号 双引号 都是有含义的 如没有转义 会被解析是语法的一部分
						//  添加转义符号的引号会被当成字符串处理 不会被解析
					$.each(menu1.child,function (index2,menu2) {
						var starMenu2="<dl class=\"layui-nav-child\"><dd><a href=\"javascript:;\" onclick='addTab(\" "+menu2.menuName+"\",\""+menu2.menuUrl+"\","+menu2.menuId+ ")'>";
						var endMenu2="</a></dd></dl>";
						//拼接二级菜单
						content+=starMenu2+menu2.menuName+endMenu2;
					})
						var endMenu1B="</li>";
					content+=endMenu1B;

					})
					//赋值
					$("#menu_nav").html(content);
					//菜单的内容是后续添加的，需要更新渲染 比如：表单下拉
					layui.use('element', function(){
						var element = layui.element;
						element.render("nav","menu_nav");
					});
				}
			})
		})


		//打开选项卡  点击二级菜单，打开主体区的选项卡
		function addTab(menuName,menuUrl,menuId) {
			//alert("menuName"); alert("属性")
			layui.use('element', function(){
				//在主体区添加选项卡
				var element = layui.element;

				if ($("li[lay-id='" + menuId + "']").length === 0) {
					//第一个参数是主体区的lay-filter值
					element.tabAdd('myTab', {
						//title对应二级菜单的标题 content(iframe src)对应二级菜单的url id对应二级菜单的
						title: menuName
						,content: '<iframe src=${pageContext.request.contextPath}'+menuUrl+' width="100%" height="100%"></iframe>' //支持传入html
						,id: menuId
					})
				}
			element.tabChange("myTab", menuId);
			});
		}

	</script>

</head>
<body class="layui-layout-body">

	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">持明法洲项目</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<%--<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item">
					<a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd><a href="">邮件管理</a></dd>
						<dd><a href="">消息管理</a></dd>
						<dd><a href="">授权管理</a></dd>
					</dl>
				</li>
			</ul>--%>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
						${sessionScope.admin.username}
					</a>
					<dl class="layui-nav-child">
						<dd><a href="">基本资料</a></dd>
						<dd><a href="">安全设置</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item"><a href="${pageContext.request.contextPath}/admin/loginOut">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） 动态添加新的导航内容 -->
				<%--  lay-filter="menu_nav" id="menu_nav"  --%>
				<ul class="layui-nav layui-nav-tree"  lay-filter="menu_nav" id="menu_nav" lay-shrink="all">
					<%--一级菜单和二级菜单的显示页面--%>
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<%--  lay-filter="myTab"  --%>
				<div class="layui-tab layui-tab-brief layui-tab-card" lay-allowClose="true" lay-filter="myTab">
					<ul class="layui-tab-title">
						<li class="layui-this">欢迎页</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">欢迎使用--持明法洲项目</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
</body>
</html>